React hook 클로저 탈출기

이 에러는 React Hook의 클로저 의존성으로 인해 발생한 에러인데, 이 포스팅에서는 React Hook을 사용할 때 필연적으로 마주하게 되는 클로저의존성을 어떻게 잘 탈피할 수 있을까에 방점을 맞추고 있다. 일단 이번 포스팅에서는 어떤 상황을 마주했고, 이것을 어떻게 풀어나갔는지 이야기해보려 한다. messageIndex가 +1이 되어서 messages의 길이와 같아지면 라우팅을 해야하...

custom hookReact Hook ClosureReact Hook Closure

Hook 사용예제: useTabs + 함수형 컴포넌트의 event 처리

Tab창 기능을 하는 커스텀 훅을 구현해보았다. 객체를 return 했을 때 { currentItem, changeItem } = useTabs(1, content); 이것처럼 객체안의 값들을 바로 쓸 수 있는점이 편리한 것 같다. 함수형 컴포넌트의 event를 처리할 때 함수를 호출하는 경우 <button key={index} onClick={() => changeItem(index)}>{...

Event HandleruseTabshookcustom hookEvent Handler

Api 호출하는 커스텀 훅 만들기

하지만 업데이트 api를 사용할 때에는 유저의 인풋값을 state에 저장한후, state 값을 api에 실어보내서 업데이트 하는 상황이 많다. 따라서 이벤트 함수를 호출할 때에 api를 호출한 후, 'api 호출에 성공'했으면 '상태 값도 업데이트'를 해줘야 한다. react-async 라이브러리로 상태값을 없데이트 하는 방법에서는 useEffect [] 안의 data 가 변경이 감지되면 상...

custom hookReactAPIhookreact-async비동기API